<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>聊天对话</title>

<!--讨论区滚动条begin-->
<link rel="stylesheet" type="text/css" href="/static/css/jscrollpane1.css" />
<script src="/static/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<!--引用jquery-1.4.2.min.js会影响添加表情，不引用jquery-1.4.2.min.js就不支持IE、火狐浏览器的鼠标滚轮插件-->
<!-- the mousewheel plugin -->
<script type="text/javascript" src="/static/js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="/static/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/static/js/scroll-startstop.events.jquery.js"></script>
<script type="text/javascript" src="/static/js/smart.min.js"></script>
<!--讨论区滚动条end-->
</head>
<body>
<div class="panel">
<div class="talklist">
    <div>
        <form id="sform" action="/chat" method="post">
            <input
      type="hidden"
      name="csrf_token"
      id="csrf_token"
      value="{{ csrf_token() if csrf_token else '' }}"
    >
            <input type="text" name="keyword" value="{{ key }}" style="border:1px solid;"/>
            <input type="submit" value="搜索">
        </form>
    </div>
    <div>
        <p><span>编号</span> &nbsp; <span>时间</span> &nbsp; <span>次数</span></p>
    </div>
    <ol>
        {% for t in tlist %}
        <li>
        {% if cid==t.id %}
            [{{ t.id }}]{{ t.datetime }}
        {% else %}
            [{{ t.id }}]<a class="listLink" href="javascript:getOne({{ t.id }})" id="a_{{ t.id }}">{{ t.starttime }}</a>({{ t.count }})
        {% endif %}
        </li>
        {% endfor %}
    </ol>
</div>
<div class="talk">
	<div class="talk_title"><span>用户对话</span></div>
	<div class="talk_record">
		<div id="jp-container" class="jp-container">
            {% for c in clist %}
			<div class="talk_recordboxme">
				<div class="user"><img src="/static/images/thumbs/user.jpg" width="45" height="45"/>用户</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>{{ c.input }}</h3>
					<span class="talk_time">{{ c.datetime }}</span>
				</div>
			</div>
            <div class="talk_recordboxme">
				<div class="user"><img src="/static/images/thumbs/robot.png" width="45" height="45"/>小胖</div>
				<div class="talk_recordtextbg1">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>{{ c.output }}</h3>
					<span class="talk_time">{{ c.datetime }}</span>
				</div>
			</div>
            {% endfor %}
		</div>
	
	</div>
	
{#	<div class="talk_word">#}
{#		&nbsp;#}
{#		<input class="add_face" id="facial" type="button" title="添加表情" value="" />#}
{#		<input class="messages emotion" autocomplete="off" value="在这里输入文字" onFocus="if(this.value=='在这里输入文字'){this.value='';}"  onblur="if(this.value==''){this.value='在这里输入文字';}"  />#}
{#		<input class="talk_send" type="button" title="发送" value="发送" />#}
{#	</div>#}
</div>
</div>
<script id="tpl" type="text/x-smarty-tmpl">
            <div class="talk_recordbox">
				<div class="user"><img src="/static/images/thumbs/user.jpg" width="45" height="45"/>用户</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>{$input}</h3>
					<span class="talk_time">{$datetime}</span>
				</div>
			</div>
            <div class="talk_recordboxme">
				<div class="user"><img src="/static/images/thumbs/robot.png" width="45" height="45"/>小胖</div>
				<div class="talk_recordtextbg1">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>{$output}</h3>
					<span class="talk_time">{$datetime}</span>
				</div>
            </div>
</script>
<script type="text/javascript">
function getOne(c) {
    $('.listLink').css({fontWeight:'normal'});
    $('#a_'+c).css({fontWeight:'bold'});
    $.getJSON('/chat/s/'+c,function (data) {
        $('#jp-container')[0].innerHTML='';
        $.each(data, function (n, value) {
            var tplText = $('#tpl')[0].innerHTML;
            var compiled = new jSmart( tplText );
            var d=new Date(value.datetime);
            var res = compiled.fetch( { input:value.input,output:value.output,datetime:d.toLocaleDateString()+' '+d.toLocaleTimeString() } );
            $('#jp-container')[0].innerHTML += res;
        });
    })
    //$('#sform').submit();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"/>
</body>
</html>